<template>
  <div v-functions="['customer_follow_insert']">
    <el-button
      v-if="showBtn"
      icon="el-icon-plus"
      size="mini"
      style="margin-left: 10px"
      @click="openDialog"
      >跟进记录</el-button
    >
    <span v-else @click="openDialog"><i class="el-icon-plus"></i>跟进记录</span>
    <MoveDialog
      :visible.sync="visible"
      :before-close="closeDialog"
      class="formRef"
      width="500px"
      :close-on-click-modal="false"
      append-to-body
    >
      <span
        slot="title"
        style="color: #303753; font-size: 14px; font-weight: 600"
        >跟进记录</span
      >
      <el-input
        type="textarea"
        style="margin-top: 10px"
        :autosize="{ minRows: 4 }"
        placeholder="添加跟进记录"
        v-model="memo"
        maxlength="100"
        show-word-limit
        ref="trackInput"
      >
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" size="mini">取 消</el-button>
        <el-button
          type="primary"
          @click="submit"
          :disabled="memo.length === 0"
          size="mini"
          >确 定</el-button
        >
      </div>
    </MoveDialog>
  </div>
</template>

<script lang="ts">
/**
 * 跟进记录按钮
 */
import { Component, Vue, Ref, Prop } from 'vue-property-decorator';
import MoveDialog from '@/components/globalTool/moveDialog/index.vue'
import { commonAction } from '@/utils/common';
@Component({
  name: 'Track',
  components: {
    MoveDialog
  }
})
export default class Track extends Vue {
  [x: string]: any
  @Ref() private readonly trackInput: any
  @Prop() private customerId
  @Prop({ default: () => false }) private showBtn
  private visible = false
  private memo = ''

  // TODO 打开对话框，可以再次填入数据
  private openDialog () {
    this.visible = true
    this.$nextTick(() => {
      this.trackInput.$el.querySelector('textarea').focus()
    })
  }

  // 关闭对话框
  private closeDialog () {
    this.memo = ''
    this.visible = false
  }

  // 提交按钮
  private submit () {
    const params = {
      url: '/server-crm/action/customer/dynamics/follow',
      method: 'POST',
      data: {
        customerId: this.customerId,
        memo: this.memo
      }
    }
    commonAction(params).then(res => {
      if (res.success) {
        this.$message.success('提交成功')
        this.$emit('updateTrackList')
        this.closeDialog()
      }
    })
  }
}
</script>
